<template>
  <div>
    <el-container>
      <el-header>站点订单废品审核</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-switch v-model="showUnhandel" active-text="查看未处理" inactive-text="查看全部" @change="handleChange">
            </el-switch>
            <div v-show="showUnhandel">
               <!-- 订单收货审核信息表格 -->
              <el-table :data="orders" style="width: 100%">
                <el-table-column prop="userId" label="用户id" width="180"></el-table-column>
                <el-table-column prop="createTime" label="预约时间" width="180"></el-table-column>
                <el-table-column prop="employId" label="收货员工id" width="180"></el-table-column>
                <el-table-column prop="address" label="收货人地址" width="180"></el-table-column>
                <el-table-column prop="phone" label="收货人电话" width="180"></el-table-column>
                <el-table-column prop="name" label="收货人姓名" width="180"></el-table-column>
                <el-table-column label="操作" width="350">
                  <template #default="scope">
                    <!-- 查看订单收货审核表细节 -->
                    <el-button type="danger" size="small" @click="showDetail(scope.row)">查看订单详情</el-button>
                    <!--显示驳回理由-->
                    <el-button type="danger" v-show="scope.row.state==2" size="small" @click="showRefuseReason(scope.row)">查看驳回理由</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-show="!showUnhandel">
              <!-- 订单收货审核信息表格 -->
              <el-table :data="orders" style="width: 100%">
                <el-table-column prop="userId" label="用户id" width="180"></el-table-column>
                <el-table-column prop="createTime" label="预约时间" width="180"></el-table-column>
                <el-table-column prop="employId" label="收货员工id" width="180"></el-table-column>
                <el-table-column prop="address" label="收货人地址" width="180"></el-table-column>
                <el-table-column prop="phone" label="收货人电话" width="180"></el-table-column>
                <el-table-column prop="name" label="收货人姓名" width="180"></el-table-column>
                <el-table-column label="操作" width="350">
                  <template #default="scope">
                    <!-- 查看订单收货审核表细节 -->
                    <el-button type="danger" size="small" @click="showDetail(scope.row)">查看订单详情</el-button>
                    <!-- 更改订单收货审核状态按钮 -->
                    <el-button v-show="scope.row.state==6" type="success" size="small" @click="confirm(scope.row)">审核通过</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-col>
        </el-row>
      </el-main>

      <!-- 查看订单收货审核详情-->
      <el-dialog v-loading="loading" title="订单详情" :visible.sync="showDetailWindow" width="80%">
        <el-table :data="detailList" border>
          <el-table-column property="orderNum" label="订单号"></el-table-column>
          <el-table-column property="junkType" label="废品种类" ></el-table-column>
          <el-table-column property="singlePrice" label="废品单类价格"></el-table-column>
          <el-table-column property="number" label="数量"></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
        </el-table>
        <!-- 关闭对话框按钮 -->
        <el-button @click="showDetailWindow = false" type="danger" round>关闭</el-button>
      </el-dialog>
    </el-container>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
      :page-sizes="[3, 4, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "StationBoss",
    data() {
      return {
        showUnhandel: false,
        showDetailWindow: false,
        loading: false,
        orders: [],
        detailList: [],
        page: {
          pageNum: 1,
          pageSize: 5,
          total: 0
        },
        stationId: null
      };
    },
    mounted() {
      this.stationId = localStorage.getItem('stationId');
      this.loadAllOrders(this.page.pageNum, this.page.pageSize);
    },
    methods: {
      showRefuseReason(row){
        this.$message.success(row.refuseReason)
      },
      handleChange() {
        if (this.showUnhandel) {
          this.loadAllUnhandleOrders(this.page.pageNum, this.page.pageSize);
        } else {
          this.loadAllOrders(this.page.pageNum, this.page.pageSize);
        }
      },
      showDetail(row) {
        this.$http.get("/order/orderDetails/selectAllOrderDetailByOrderId/" + row.id).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success(resp.data.message);
            this.detailList = resp.data.data;
          } else {
            this.$message.error(resp.data.message);
          }
        });
        this.showDetailWindow = true;
      },
      confirm(row) {
        this.$http.get("/station/confirm/locationConfirm/"+row.id).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success(resp.data.message);
            this.loadAllOrders(this.page.pageNum, this.page.pageSize);
          } else {
            this.$message.error("确认失败: " + resp.data.message);
          }
        });
      },
      // formatState(row) {
      //   switch (row.state) {
      //     case 0:
      //       return "待审查";
      //     case 1:
      //       return "已通过";
      //     default:
      //       return "未知";
      //   }
      // },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.loadAllOrders(this.page.pageNum, this.page.pageSize);
      },
      handleCurrentChange(pageNum) {
        this.page.pageNum = pageNum;
        this.loadAllOrders(this.page.pageNum, this.page.pageSize);
      },
      loadAllOrders(pageNum, pageSize) {
        this.orders=null
        this.$http.get("/order/tOrder/findByStationId", {
          params: {
            id: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
          }
        }).then(response => {
          if(response.data.code==200){
          const result = response.data.data;
          this.page.pageNum = result.current;
          this.page.pageSize = result.size;
          this.page.total = result.total;
          this.orders = result.records;
          }else{

            this.$message.error(response.data.message)
          }
        });
      },
      loadAllUnhandleOrders(pageNum, pageSize) {
        this.orders=null
        this.$http.get("/order/tOrder/findUnHandelByStationId", {
          params: {
            id: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
          }
        }).then(response => {
          if(response.data.code==200){
            const result = response.data.data;
            this.page.pageNum = result.current;
            this.page.pageSize = result.size;
            this.page.total = result.total;
            this.orders = result.records;
          }else{
            this.$message.error(response.data.message)
          }

        });
      }
    }
  };
</script>

<style scoped>

</style>
